<template>
	<div>
		<mt-swipe :auto="4000">
			<!--在组件中，使用v-for循环的话，一定要使用key-->
			<!--将来谁用这个组件，谁就传递 lunbotuList-->
			<!--此时，lunbotuList 应该 父组件向子组件传值来设置-->
			<mt-swipe-item v-for="item in lunbotuList" :key="item.id">
				<img :class="{'full': isfull}" :src="item.img" alt="">
			</mt-swipe-item>
		</mt-swipe>
	</div>

	<!--分析：为什么商品评论中的轮播图那么丑～～-->
	<!--
		1、首页中的图片它的宽和高都是用使用100%的宽度
		2、在商品详情页面中轮播图的图片，如果也使用宽高为100%的话，页面不好看
		3、商品详情中的轮播图，期望高度是100%，但是宽度为自适应
		4、问题的原因：首页中的轮播图 和 详情中的轮播图分歧点是 宽度到底是100% 还是 自适应
		5、既然这两个轮播图，其他方面都是没有冲突的，只是宽度有分歧，那么我们可以定义一个属性，让使用轮播图的调用者，手动指定是否为100%的宽度
	-->

</template>

<script>
    export default {
        name: "swiper",
        props: ['lunbotuList', 'isfull']
    }
</script>

<style lang="less" scoped>
	.mint-swipe {
		height: 200px;

		.mint-swipe-item {

			text-align: center;

			img {
				/*width: 100%;*/
				height: 100%;
			}
		}
	}

	.full {
		width: 100%;
	}
</style>